<template>
    <div>
    <j-tree :load-node="loadNodeTest"
     :searched-data="searchedData"
     v-model="filterText"
     @filter-tree="filterTree"
     @node-click="handleNodeClick"
     ></j-tree>
     <!-- <el-select v-model="selectTreeNodeLabel">
       <el-option :value="selectTreeNodeId">
         <el-tree
             :props="props"
             :load="loadNode"
             lazy
             show-checkbox
             @node-click="handleNodeClick"
             @check-change="handleCheckChange">
         </el-tree>
       </el-option>
     </el-select>-->

     <treeselect
         :multiple="false"
         :options="options"
         placeholder="Select your favourite(s)..."
         v-model="value"
     ></treeselect>

    </div>
</template>

   <script>
   import JTree from './j-tree.vue';


   export default {
     name: "index",
     components: {
       JTree
     },
     data(){
       return {
         searchedData:[],
         filterText:'',
         props: {
           label: 'name',
           children: 'zones',
           isLeaf: 'leaf'
         },
         count: 1,
         selectTreeNodeId:'',
         selectTreeNodeLabel:'',
         // define the default value
         value: null,
         // define options
         options: [ {
           id: 'a',
           label: 'a',
           children: [ {
             id: 'aa',
             label: 'aa',
           }, {
             id: 'ab',
             label: 'ab',
           } ],
         }, {
           id: 'b',
           label: 'b',
         }, {
           id: 'c',
           label: 'c',
         } ],
       }
     },
     methods:{
       async loadNodeTest(node, resolve) {
         let treeData = {};
         if (node.level === 0) {
           let parent_id = '';
           let params = {parent_id: parent_id};
          // const res = await getOrganizations(params)
         //  if (!res) return;
          let res = {
             data:{
               result:[
                 {
                   code_name:'A',
                   id:'1'
                 },
                 {
                   code_name:'B',
                   id:'2'
                 }
               ]
             }
           }
           treeData.code_name = res.data.result[0].code_name;
           treeData.id = res.data.result[0].id;
           if (treeData.code_name) {
             return resolve([treeData]);
           }
           return;
         }

         const res = await getOrganizations({parent_id: node.data.id})
         if (!res) return;
         const orgArr = res.data.result.map((item) => {
           return {
             code_name: item.code_name,
             id: item.id,
           };
         });
         resolve(orgArr);
       },

       async filterTree() {
         if(this.filterText && this.filterText.trim() !== '') {
           const res = await getOrganizations4Search({code_name:this.filterText});
           if(!res) return;
           this.searchedData = res.data.result;
         }
       },

       handleCheckChange(data, checked, indeterminate) {
         console.log(data, checked, indeterminate);
         console.log("handleCheckChange data:",data)
         this.selectTreeNodeId = data.id
         this.selectTreeNodeLabel = data.name
       },
       handleNodeClick(data) {

       },
       loadNode(node, resolve) {
         console.log("懒加载:",node)
         if (node.level === 0) {
           return resolve([{id:'1',  name: 'region1',leaf:true }, {id:'2', name: 'region2' },{id:'3',name:'region3'}]);
         }
         if (node.level > 3) return resolve([]);

         var hasChild;
         if (node.data.name === 'region1') {
           hasChild = true;
         } else if (node.data.name === 'region2') {
           hasChild = false;
         } else {
           hasChild = Math.random() > 0.5;
         }

         setTimeout(() => {
           var data;
           if (hasChild) {
             data = [{
               name: 'zone' + this.count++,
               id:this.count++ + 3
             }, {
               name: 'zone' + this.count++ ,
               id:this.count++ + 5
             }];
           } else {
             data = [];
           }

           resolve(data);
         }, 500);
       }
     }
   }
   </script>

   <style scoped>

   </style>